<template>
    <TopBar></TopBar>
    <div class="body">
        <div class="left">
            <div class="nav">
                <div class="logo">
                    <el-image src="https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/Retail/retail_logo.png"
                        fit="cover"></el-image>
                </div>
                <button @click="router.push('/retail')"><el-icon size="25" class="nav-icon">
                    <Histogram />
                    </el-icon>热门发现</button>
                <button @click="router.push('/retailSub')"><el-icon size="25" class="nav-icon">
                        <Promotion />
                    </el-icon>发布宝贝</button>
                <button @click="router.push('/retailNews')"><el-icon size="25" class="nav-icon">
                        <Comment />
                    </el-icon>我的通知</button>
                <button @click="jumpMyPage"><el-image class="my_avatar" :src="user.avatar"></el-image>我的页面</button>
            </div>
        </div>
        <div class="right">
            <div class="notification-center">
                <div class="notification-header">
                    <h2>通知中心</h2>
                    <button @click="markAllAsRead" class="mark-all-read">全部标为已读</button>
                </div>
                <div class="notification-list">
                    <div v-for="notification in notifications" :key="notification.notiUid" class="notification-item"
                        :class="{ 'unread': notification.status==0 }">
                        <div class="notification-content">                
                            <div class="notification-avatar">
                                <img :src="notification.image" :alt="notification.sender">
                            </div>
                            <div class="notification-details">
                                <p class="notification-message">
                                    <strong>{{ notification.uid }}</strong> {{ notification.content }}
                                </p>
                                <span class="notification-time">{{ formatTime(notification.createdAt) }}</span>
                            </div>
                        </div>
                        <div class="notification-actions">
                            <button @click="markAsRead(notification)" v-if="notification.status==0" class="mark-read">
                                标为已读
                            </button>
                            <button @click="deleteNotification(notification)" class="delete">
                                删除
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Footer></Footer>
</template>
  
<script setup>
import TopBar from '@/component/TopBar.vue'
import Footer from '@/component/Footer.vue'
import { ref, onMounted } from 'vue'
import router from '../../router/index.js'
import request from '../../utils/request';
const user = ref({});

const uid =JSON.parse(sessionStorage.getItem('uid'));

const getUserInfo = () => {
    if (uid) {
        request.get('/api/user/GetUserInfo', {
            params: {
                uid: uid
            }
        }).then(res => {
            user.value = res.data;
        }).catch(error => {
            console.error("请求失败", error);
        })
    } else {
        console.log("未登录");
        user.value.avatar = "https://bu.dusays.com/2024/12/28/677018da4485e.png";
    }
}


// const notifications = ref([
//     { id: 1, sender: '小明', message: '赞了你的帖子', time: new Date(2023, 5, 1, 14, 30), read: false, avatar: '/placeholder.svg?height=40&width=40' },
//     { id: 2, sender: '小红', message: '评论了你的照片', time: new Date(2023, 5, 2, 9, 15), read: false, avatar: '/placeholder.svg?height=40&width=40' },
//     { id: 3, sender: '小张', message: '关注了你', time: new Date(2023, 5, 3, 18, 45), read: true, avatar: '/placeholder.svg?height=40&width=40' },
// ]);

const notifications = ref({});

const GetAllNotifications = () => {
    request.get('/api/retail/selectNotificationByUid', {
        params: {
         uid:uid   
        }
    }).then(res => {
        console.log("我是全部通知");
        console.log(res.data);
        notifications.value = res.data;
    })
}


const formatTime = (date) => {
    const now = new Date();
    const inputDate=new Date(date);

    const diff = now - inputDate;
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);

    if (days > 0) return `${days}天前`;
    if (hours > 0) return `${hours}小时前`;
    if (minutes > 0) return `${minutes}分钟前`;
    return '刚刚';
};

const jumpMyPage = () => {
    if (!sessionStorage.getItem('uid')) {
        ElNotification({
            title: '失败',
            message: '请先登录',
            type: 'error',
        })
        setTimeout(() => {
            router.push('/login');
        }, 1000);
    }
    else{
        router.push('/retailMy')
    }
}

const markAsRead = async (notification) => {
    await request.put('/api/retail/isRead',null, {
        params:{
            uid:uid,
            notiUid:notification.notiUid
        }
        
    })
    notification.status = 1;
};

const markAllAsRead = async () => {
    await request.put('/api/retail/isAllRead',null, {
        params:{
            uid:uid
        }
        
    })
    notifications.value.forEach((notification) => (notification.status = 1));
};

const deleteNotification = async (notificationToDelete) => {
    await request.delete(`/api/retail/deleteNotification/${uid}&${notificationToDelete.notiUid}`)
    notifications.value = notifications.value.filter(
        (notification) => notification.notiUid !== notificationToDelete.notiUid
    );
};

// 初始化加载
onMounted(async () => {
    await getUserInfo();
    await GetAllNotifications();
})
</script>
  
<style scoped>

.body {
    width: 100%;
    height: 100vh;
    display: flex;
}

.left {
    width: 15%;
    height: 100%;
}

.nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 4vh;
    gap: 3vh;
    justify-content: center;
}

.nav button {
    font-size: large;
    font-weight: bold;
    transition: all 0.3s ease;
}

.nav button:hover {
    transform: scale(1.05);
}

.nav-icon {
    top: 0.7vh;
}


.logo {
    width: 50%;
}

.my_avatar {
    width: 3vh;
    top: 0.7vh;
    border-radius: 50%;
}

.right {
    width: 85%;
    height: 100%;
    background-color: #f4f4f4;
    padding: 20px;
    box-sizing: border-box;
}

.notification-center {
    font-family: Arial, sans-serif;
    max-width: 500px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.notification-header h2 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.mark-all-read {
    background: none;
    border: none;
    color: #1da1f2;
    cursor: pointer;
    font-size: 14px;
}

.notification-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.notification-item:hover {
    background-color: #f8f8f8;
}

.notification-item.unread {
    background-color: #e8f5fe;
}

.notification-content {
    display: flex;
    align-items: center;
}

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
}

.notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-details {
    flex-grow: 1;
}

.notification-message {
    margin: 0 0 5px;
    font-size: 14px;
    color: #333;
}

.notification-time {
    font-size: 12px;
    color: #888;
}

.notification-actions {
    display: flex;
    gap: 10px;
}

.notification-actions button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.mark-read {
    color: #1da1f2;
}

.mark-read:hover {
    background-color: #e8f5fe;
}

.delete {
    color: #e0245e;
}

.delete:hover {
    background-color: #fde8ee;
}

/* 添加一些动画效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-item {
    animation: fadeIn 0.3s ease;
}
</style>